<template>
  <div>
    <div class="grid">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="tri"></div>
  </div>
</template>

<script>
export default {
  name: "GridLayout"
};
</script>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: 40% 30% 20% 5% 5% 5%;
}
.item {
  width: 300px;
  height: 300px;
  background-color: lightcoral;
  border: 3px green solid;
}.tri{  border-bottom: 10px solid white;
   border-right: 10px solid transparent;
   border-left: 10px solid transparent;
   height: 0px;
   width: 0px;
}
</style>
